import React,{useState,useEffect} from 'react'
import MyBreadcrumb from '../../components/MyBreadcrumb';
import {Button,Card,Divider,Form,Modal,Input,Radio, Upload, Select} from 'antd'
import { PlusOutlined,LoadingOutlined  } from '@ant-design/icons';
import api from '../../api';
export default function StudentList() {
  const [isModalOpen,setIsModalOpen]=useState(false)
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();//表示图片路径
  const [subjects,setSubjects]=useState([])
  const [classes,setClasses]=useState([])

  useEffect(()=>{
    getSubjects()

  },[])

  const getSubjects=async()=>{
    const result=await api.subjects.getSubjects()
    console.log('result',result.data.result);
    setSubjects(result.data.result)
  }

  const handleOk=async()=>{
     //获取文本框中的信息
    console.log("姓名:",addStudentForm.getFieldValue(['name']));
    console.log("年龄:",addStudentForm.getFieldValue(['age']));
    console.log("性别:",addStudentForm.getFieldValue(['gender'])||'男');
    console.log('头像:',imageUrl);
    console.log('专业:',addStudentForm.getFieldValue(['subjectsId']));
    console.log('班级:',addStudentForm.getFieldValue(['classesId']));
    //封装对象
    let data={
      name:addStudentForm.getFieldValue(['name']),
      age:addStudentForm.getFieldValue(['age']),
      gender:addStudentForm.getFieldValue(['gender'])||'男',
      image:imageUrl,
      subjectsId:addStudentForm.getFieldValue(['subjectsId']),
      classesId:addStudentForm.getFieldValue(['classesId'])
    }
    let result=await api.students.addStudents(data)
    console.log(result);
  }
  const handleCancel=()=>{setIsModalOpen(false)}
  /*
    1.通过Form.useForm()方法的调用然后使用数组接收，数组中第1个元素就是表单的标识
    2.在<Form>标签中通过form属性来引用
  */
  const [addStudentForm]=Form.useForm()
  /*
    头像上传的回调函数
    handleChange
  */
  const handleChange=(info)=>{
    
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      setLoading(false);
      setImageUrl(`http://www.zhaijizhe.cn:3005${info.file.response.data[0]}`)      
    }
  }
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        头像上传
      </div>
    </div>
  );
 const changeSubject=async(arg)=>{
   const result=await api.classes.getClassesBySubjectsId(arg)
   
   setClasses(result.data.result)
 }

  return (
    <> 
      <Card>
         <MyBreadcrumb></MyBreadcrumb> 
         <Divider />
         <Button type='primary' onClick={()=>setIsModalOpen(true)}>增加学生</Button> 
         <Modal 
            title="增加学员" 
            open={isModalOpen}
            okText="确认"
            cancelText="取消" 
            onOk={handleOk} 
            onCancel={handleCancel}>
            {/* 增加表单 */}
            <Form form={addStudentForm}>
                <Form.Item name="name" label="姓名">
                   <Input></Input>
                </Form.Item>
                <Form.Item name="age" label="年龄">
                   <Input></Input>
                </Form.Item>
                <Form.Item name="gender" label="性别">
                <Radio.Group defaultValue={"男"}>
                  <Radio value="男">男</Radio>
                  <Radio value="女">女</Radio>
                 </Radio.Group>
                </Form.Item>
                <Form.Item name="imagePath" label="头像">
                    <Upload 
                      name='file'
                      action="http://www.zhaijizhe.cn:3005/images/uploadImages"
                      onChange={handleChange}
                      listType="picture-card"
                      showUploadList={false}>
                        {imageUrl ? (
                          <img
                            src={imageUrl}
                            alt="avatar"
                            style={{
                              width: '100%',
                            }}
                          />
                        ) : (
                          uploadButton
                        )}
                    </Upload>
                </Form.Item>
                <Form.Item label="专业" name="subjectsId">
                      <Select placeholder={"请输入请选择"} options={subjects} fieldNames={{label:'name',value:'_id'}} onChange={changeSubject}>
                      </Select>
                </Form.Item>
                <Form.Item label="班级" name="classesId">
                      <Select placeholder={"请输入请选择"} value={''} options={classes} fieldNames={{label:'name',value:'_id'}} onChange={changeSubject}>
                      </Select>
                </Form.Item>
            </Form>
        </Modal>
      </Card> 
    </>
  )
}
